<template>
  <div class="parameter-product">
    <div class="flex justify-center mb-6">
      <span class="text-xl font-bold text-gray-800">入库记录</span>
    </div>
    <!-- 条件查询区域 -->
    <div class="search-container mb-4">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="入库类型">
              <el-input v-model="searchForm.inStockType" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="存货名称">
              <el-input v-model="searchForm.goodsName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="存货类别">
              <el-input v-model="searchForm.goodsCategory" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他入库类型">
              <el-select v-model="searchForm.otherType" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="searchForm.startTime"
                type="date"
                placeholder="起始日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchForm.endTime"
                type="date"
                placeholder="结束日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="form-actions">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="warehouse" label="入库仓库" />
      <el-table-column prop="goodsCategory" label="存货类别" />
      <el-table-column prop="goodsCode" label="存货编码"/>
      <el-table-column prop="batchNo" label="批次号" />
      <el-table-column prop="goodsName" label="存货名称" />
      <el-table-column prop="supplier" label="供应商" />
      <el-table-column prop="supplierCode" label="供应商编码" />
      <el-table-column prop="inStockTime" label="入库时间" />
      <el-table-column prop="unloadArea" label="卸货区域"/>
      <el-table-column prop="inStockQty" label="入库数量"/>
      <el-table-column prop="unit" label="计量单位"/>
      <el-table-column prop="inStockType" label="入库类型"/>
      <el-table-column prop="otherType" label="其他入库类型"/>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryStockInRecords } from '@/api/stockIn/stockInQuery.js'

// 分页相关参数
const page = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const tableData = ref([])
// 查询表单参数
const searchForm = ref({
  inStockType: '',
  goodsName: '',
  goodsCategory: '',
  otherType: '',
  startTime: '',
  endTime: ''
})

// 加载状态
const loading = ref(false)

async function init() {
  try { 
    // 显示加载状态
    loading.value = true
    // 使用对象扩展运算符简化参数构建
    let params = {
      page: page.value,
      pageSize: pageSize.value,
      ...searchForm.value
      
    }
    const res = await queryStockInRecords(params)
    console.log(params)
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    } else {
      console.error('获取数据失败:', res)
      // 可以在这里添加错误提示
      // ElMessage.error(`获取数据失败: ${res.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('接口请求错误:', error)
    // ElMessage.error('网络错误，请稍后重试')
  } finally {
    // 无论成功失败都关闭加载状态
    loading.value = false
  }
}

onMounted(() => {
  init()
})

const handleQuery = () => {
  page.value = 1
  init()
}
const handleSizeChange = newSize => {
  pageSize.value = newSize
  page.value = 1
  init()
}
const handleCurrentChange = newPage => {
  page.value = newPage
  init()
}
</script>

<style scoped>
.clickable {
  cursor: pointer;
  color: #409eff;
}
.demo-pagination-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 20px 0;
}
.search-container {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-actions {
  display: flex;
  align-items: center;
}
</style>